<template>
  <div class="the-list">
    <div class="panel-search">
      <el-form inline :model="tableData.query" class="demo-form-inline">
      <el-form-item label="举报对象">
        <el-select v-model="tableData.query.reportObj">
          <el-option label="全部" value="" />
          <el-option v-for="item in reportList.target" :key="item.key" :label="item.name" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="举报原因">
        <el-select v-model="tableData.query.reportReason">
          <el-option label="全部" value="" />
          <el-option v-for="item in reportList.reason" :key="item.key" :label="item.name" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="tableData.query.dealStatus">
          <el-option label="全部" value="" />
          <el-option v-for="item in reportList.status" :key="item.key" :label="item.name" :value="item.key" />
        </el-select>
      </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="tableFn.onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="panel-table">
      <div class="table-head">
        <div>
         举报列表
        </div>
      </div>
      <el-table :data="tableData.list" stripe :header-cell-style="{backgroundColor:'#ededed',padding:'12px 0'}" style="width: 100%;" border>
        <el-table-column prop="createdAt" label="创建时间" width="140px"/>
        <el-table-column prop="reportObj" label="举报对象">
          <template #default="{row}">
            {{getItemFromArray(reportList.target,row.reportObj)}}
          </template>
        </el-table-column>
        <el-table-column prop="informantName" label="举报人">
        <template #default="{row}">
          <div class="isLink" @click="gotoUserDetail(row.informantId)">
            {{row.informantName}}<br>
            {{row.informantPhone}}
          </div>
        </template>
      </el-table-column>
        <el-table-column prop="reportReason" label="举报原因" />
        <el-table-column prop="reportContent" label="举报内容" />
        <el-table-column prop="haveImage" label="附加图片">
          <template #default="{row}">
            {{['无','有'][row.haveImage]}}
          </template>
        </el-table-column>
        <el-table-column prop="dealStatus" label="状态">
          <template #default="{row}">
            <span :style="{color:['#F59A23','#70B603'][row.dealStatus]}">{{getItemFromArray(reportList.status,row.dealStatus) || "--"}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dealResult" label="处理结果">
          <template #default="{row}">
            {{getItemFromArray(reportList.result,row.dealResult)}}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="80px" align="center">
          <template #default="{row}">
            <el-button size="small" type="primary" plain @click="detailFn.gotoDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-pagination">
      <pagination :total="tableData.total" v-model:page="tableData.query.page" v-model:limit="tableData.query.pageSize" @pagination="tableFn.getTableData" />
      </div>

    </div>

  </div>
</template>

<script>
import { reactive } from "vue";
import { getReportList }  from "@/api/operation.js";
import { useRouter } from "vue-router";
import Pagination from "@/components/Pagination";

import { reportList,getItemFromArray,gotoUserDetail }  from "@/utils/tool.js";
export default {
  name:"reportManage",
  components:{
    Pagination,
  },
  setup() {
    // 默认数据备份，以便重置或恢复
    const { $data: tableData, $fn: tableFn } = tableModule();
    
    let router = useRouter();
    const detailFn={
      gotoDetail(row){
        router.push(`/operation/report/detail/${row.id}`)
      }
    }


    return {
      tableData,
      tableFn,
      detailFn,

      reportList,
      getItemFromArray,gotoUserDetail,
    };
  },
};

// 表格功能模块，包括搜索，分页等
function tableModule() {
  const router = useRouter();
  const backup = {
    query: {
      reportObj:"",//	举报对象 0、用户主页；1、私信聊天；2、作品
      reportReason:"",//	举报原因（直接传递举报内容，选择其他传“其他”）
      dealStatus: 0,//	处理状态 0、未处理；1、已处理
      pageSize: 10,
      page: 1,
    },
  };

  const $data = reactive({
    query: { ...backup.query },
    list: [],
    total: 0,
  });
  const $fn = {
    getTableData() {
      getReportList($data.query).then((res) => {
        if (res.code === 0) {
          $data.list = res.data.items;
          $data.total = res.data.pagination.total_record;
        }
      });
    },
    onResetQuery() {
      $data.query = { ...backup.query };
      $fn.getTableData();
    },
    onSubmit() {
      $fn.getTableData();
    },
  };

  $fn.getTableData();

  return {
    $data,
    $fn,
  };
}
</script>

<style scoped lang="scss">
@import "@/styles/tablePage.scss";
</style>